<template>
    <div id="dog">
       <img :src="url">
       <p :style="{ backgroundColor:colorStr}"  @click="btnFn">{{ title }}</p>
    </div>
</template>

<script>
export default {
    props:['title','url'],
    data(){
        return{
            colorStr:'#fff'
        }
    },
    methods:{
        btnFn(){
            const arr=['a','b','c','d','e','f','1','2','3','4','5','6','7','8','9','0']
            let str='#',num
            for(let i=1;i<=6;i++){
               num= +parseInt(Math.random()*17)
                str = str+arr[num]
            } 
            this.colorStr= str
            this.$emit("syx",this.title)
           
        }
    }
};
</script>



<style scoped>
#dog{
    float: left;
    width: 200px;
    border: 1px solid black;
    text-align: center;
}
img{
    width: 100%;
 }
 p{
    cursor: pointer;
 }
 
</style>